<template>
    <div class="interview-list-container">
        <div class="header-section">
            <div class="back-button">
                <el-button @click="$router.push('/main/renshi/zhaoping/mianshitzs/mianshitzs')"
                    icon="el-icon-back">返回</el-button>
            </div>
            <h2>面试通知书列表</h2>
        </div>
        <!-- 搜索区域 -->
        <div class="search-section">
            <el-form :inline="true" :model="searchForm" class="search-form">
                <el-form-item label="公司名称">
                    <el-input v-model="searchForm.companyName" placeholder="请输入公司名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="候选人">
                    <el-input v-model="searchForm.candidateName" placeholder="请输入候选人姓名" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                    <el-button type="primary" @click="handleAdd">新增通知</el-button>
                    <el-button type="danger" @click="handleBatchDelete"
                        :disabled="!selectedRows.length">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="operation-section">
        </div>

        <!-- 表格区域 -->
        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" border
            style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="companyName" label="公司名称" min-width="150"></el-table-column>
            <el-table-column prop="candidateName" label="候选人" min-width="100"></el-table-column>
            <el-table-column prop="position" label="应聘职位" min-width="120"></el-table-column>
            <el-table-column prop="interviewDate" label="面试日期" min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.interviewDate }}
                </template>
            </el-table-column>
            <el-table-column label="面试时间" min-width="180">
                <template slot-scope="scope">
                    {{ scope.row.startTime }} - {{ scope.row.endTime }}
                </template>
            </el-table-column>
            <el-table-column prop="interviewForm" label="面试形式" min-width="100"></el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleView(scope.row)">查看</el-button>
                    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope.row)" class="delete-btn">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-section">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.current" :page-sizes="[10, 20, 50, 100]" :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getInterviewNoticeList, deleteInterviewNotice, batchDeleteInterviewNotice } from '@/api/interview'

export default {
    name: 'InterviewNoticeList',
    data() {
        return {
            loading: false,
            searchForm: {
                companyName: '',
                candidateName: ''
            },
            tableData: [],
            selectedRows: [],
            page: {
                current: 1,
                size: 10,
                total: 0
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取列表数据
        async getList() {
            this.loading = true
            try {
                const params = {
                    current: this.page.current,
                    size: this.page.size,
                    ...this.searchForm
                }
                const res = await getInterviewNoticeList(params)
                console.log("res", res)
                this.tableData = res.data.records
                this.page.total = res.data.total
            } catch (error) {
                console.error('获取列表失败：', error)
            } finally {
                this.loading = false
            }
        },

        // 搜索
        handleSearch() {
            this.page.current = 1
            this.getList()
        },

        // 重置搜索
        resetSearch() {
            this.searchForm = {
                companyName: '',
                candidateName: ''
            }
            this.handleSearch()
        },

        // 新增
        handleAdd() {
            this.$router.push('/main/renshi/zhaoping/mianshitzs/mianshitzs')
        },

        // 查看
        handleView(row) {
            this.$router.push({
                path: '/main/renshi/zhaoping/mianshitzs/mianshitzs',
                query: { id: row.id, type: 'view' }
            })
        },

        // 编辑
        handleEdit(row) {
            this.$router.push({
                path: '/main/renshi/zhaoping/mianshitzs/mianshitzs',
                query: { id: row.id, type: 'edit' }
            })
        },

        // 删除
        handleDelete(row) {
            this.$confirm('确认删除该面试通知书?', '提示', {
                type: 'warning'
            }).then(async () => {
                try {
                    await deleteInterviewNotice(row.id)
                    this.$message.success('删除成功')
                    this.getList()
                } catch (error) {
                    console.error('删除失败：', error)
                }
            }).catch(() => { })
        },

        // 批量删除
        handleBatchDelete() {
            if (!this.selectedRows.length) {
                return
            }
            this.$confirm(`确认删除选中的${this.selectedRows.length}条记录?`, '提示', {
                type: 'warning'
            }).then(async () => {
                try {
                    const ids = this.selectedRows.map(row => row.id)
                    await batchDeleteInterviewNotice(ids)
                    this.$message.success('批量删除成功')
                    this.getList()
                } catch (error) {
                    console.error('批量删除失败：', error)
                }
            }).catch(() => { })
        },

        // 选择行变化
        handleSelectionChange(val) {
            this.selectedRows = val
        },

        // 每页条数变化
        handleSizeChange(val) {
            this.page.size = val
            this.getList()
        },

        // 当前页变化
        handleCurrentChange(val) {
            this.page.current = val
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>
.interview-list-container {
    padding: 20px;
    width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 40px);

    .header-section {
        margin-bottom: 30px;
        padding: 20px;
        position: relative;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

        .back-button {
            position: absolute;
            top: 30%;
        }
    }

    .search-section {
        background: #fff;
        padding: 20px 20px 0px 20px;
        border-radius: 4px;
        margin-bottom: 20px;

        .search-form {}
    }

    .operation-section {
        margin-bottom: 20px;
    }

    .pagination-section {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .delete-btn {
        color: #F56C6C;
    }

    .el-table {
        margin-top: 20px;
    }
}
</style>